<template>
	<div>
		<el-dialog title="查看发货信息" center v-model="dialogTableVisible" append-to-body width="800px">
			<div>
				<el-row class="mt15">
					<el-col :span="3"
						class="border-bottom  text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						包裹
					</el-col>
					<el-col :span="3"
						class="border-bottom  text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						商品编码
					</el-col>
					<el-col :span="3"
						class="border-bottom  text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						商品名称
					</el-col>
					<el-col :span="3"
						class="border-bottom  text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						商品数量
					</el-col>
					<el-col :span="3"
						class="border-bottom  text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						公司名称
					</el-col>
					<el-col :span="3"
						class="border-bottom text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						物流费用
					</el-col>
					<el-col :span="3"
						class="border-bottom text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						发货单号
					</el-col>
					<el-col :span="3"
						class="border-bottom border-right text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						物流电话
					</el-col>
				</el-row>
				<div v-if="array.length > 0">
					<el-scrollbar style="max-height:450px;overflow-y: scroll;">
						<div style="display: flex;" v-for="(itemArr,index) in array" :key="index">
							<div class="border-bottom text-center border-left pt10 pb10 flex col-center row-center" style="width: 96px;">
								{{index+1}}
							</div>
							<div style="display: inline-block;">
								<div class="flex col-center" style="width: 288px;" v-for="(item,key) in itemArr.wuliushangpin" :key="key">
									<div class="border-bottom text-center border-left pt10 pb10 logMes">
										{{item.shangpinbianma}}
									</div>
									<div :span="3" class="border-bottom text-center border-left pt10 pb10 logMes">
										{{item.shangpinming}}
									</div>
									<div :span="3" class="border-bottom text-center border-left pt10 pb10 logMes">
										{{item.shangpinshuliang}}
									</div>
								</div>
							</div>
								<div :span="3" class="border-bottom text-center border-left pt10 pb10 flex col-center row-center" style="width: 96px;">
									{{itemArr.wuliugongsi}}
								</div>
								<div :span="3" class="border-bottom text-center border-left pt10 pb10 flex col-center row-center" style="width: 96px;">
									{{itemArr.wuliufeiyong}}
								</div>
								<div :span="3" class="border-bottom text-center border-left pt10 pb10 flex col-center row-center" style="width: 96px;">
									{{itemArr.wuliudanhao}}
								</div>
								<div :span="3" class="border-bottom border-right text-center border-left pt10 pb10 flex col-center row-center" style="width: 96px;">
									{{itemArr.wuliudianhua}}
								</div>
						</div>
					</el-scrollbar>
				</div>
				<div class="text-center pt20 pb20 bg-F5F7FA" v-else>
					<span>暂无数据</span>
				</div>
			</div>
			<div slot="footer" class="dialog-footer text-right mt30">
				<el-button class="cancelSubBtn" @click="dialogTableVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogTableVisible = false" class="mainSubBtn">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogTableVisible: false,
				array: [], //物流数据
			}
		},
		
		methods: {
			open(row) {
				this.dialogTableVisible = true
				this.array = row ? row : []
			},
			close() {
				this.dialogTableVisible = false
			},
		}
	}
</script>

<style>
	.logMes {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 96px;
		vertical-align: middle;
		height: 100px;
	}
</style>